<template>
    <view :class="$style.box">
        <view :class="[$style.circle, online ? $style.online : '']"></view>
        <view :class="[$style.text, , online ? $style.online : '']">{{ online ? '在线' : '离线' }}</view>
    </view>
</template>

<script lang="ts" setup>
	defineProps<{
        online:boolean
    }>()
</script>

<style lang="scss" module>
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}


    .box{
        display: inline-flex;
        align-items: center;
        .circle{
            $size : 16px;
            width: $size;
            height: $size;
            border-radius: 50%;
            background-color: rgba(250, 44, 25, 1);
            opacity: 0.8;
            &.online{
                animation: pulse 1s infinite;
                background-color: $success-color;
            }
        }
        .text{
            font-size: 20px;
            margin-left: 6px;
            color: #999;

            &.online{
                color: $primary-font-color;
            }
        }
    }
</style>